import React from 'react';
import moment from 'moment';
import { Form, DatePicker, message } from 'antd';
import { CustomModal } from 'components';
import http from 'libs/http';

const FormItem = Form.Item;

class YuyueModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  onCancel = () => {
    this.props.closeYuyueModal();
  }

  onOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { courseData } = this.props;
        const dateList = [values.f_time.format('YYYY-MM-DD HH:mm:ss')];
        this.setState({ loading: true });
        http.post({
          url: '/student/business/appointment',
          data: {
            courseId: courseData.id,
            dateList: dateList,
          },
          flag: true,
          success: () => {
            this.setState({ loading: false });
            this.props.closeYuyueModal(true);
          },
          error: () => {
            this.setState({ loading: false });
          }
        })
      }
    });
  }

  render() {
    const { visible, courseData } = this.props;
    const { getFieldDecorator } = this.props.form;
    if (!visible) return null;
    const nowTime = moment(new Date()).format('YYYY-MM-DD 08:00:00');
    return (
      <div className="yuyue-mask">
        <CustomModal
          loading={this.state.loading}
          firstTitle=""
          secondTitle=""
          thirdTitle=""
          description={`
          北冥有鱼，其名为鲲。<br/>
          鲲之大，不知其几千里也；<br/>
          化而为鸟，其名为鹏。<br/>
          鹏之背，不知其几千里也；<br/>
          怒而飞，其翼若垂天之云。
          `}
          cancelName="取消"
          okName="立即预约"
          onCancel={this.onCancel}
          onOk={this.onOk}
        >
          <Form className="yuyue-form">
            <div className="form-title">课程名称：</div>
            <div className="yuyue-title">{courseData.name}</div>
            <div className="form-title">免费试听：</div>
            <div className="form-item-wrapper">
              <FormItem>
                {getFieldDecorator('f_time', {
                  rules: [{ required: true, message: '该字段必填!' }],
                })(
                  <DatePicker
                    getCalendarContainer={triggerNode => triggerNode.parentNode}
                    style={{ width: '80%' }}
                    defaultPickerValue={moment(nowTime)}
                    showToday={false}
                    format="YYYY-MM-DD HH:mm"
                    placeholder="选择时间"
                    disabledDate={(current) => {
                      return current && current < moment().startOf('day');
                    }}
                    showTime={{
                      disabledHours: () => {
                        return [0, 1, 2, 3, 4, 5, 6, 7, 22, 23];
                      },
                      disabledMinutes: () => {
                        const disarr = [];
                        for (let i = 1; i < 61; i++) {
                          if (i === 30) continue;
                          disarr.push(i);
                        }
                        return disarr;
                      },
                      disabledSeconds: () => {
                        const disarr = [];
                        for (let i = 1; i < 61; i++) {
                          disarr.push(i);
                        }
                        return disarr;
                      },
                      hideDisabledOptions: true
                    }}
                  />
                )}
              </FormItem>
            </div>
          </Form>
        </CustomModal>
      </div>
    );
  }
}

export default Form.create()(YuyueModal);
